import React from 'react'
import { Image, Typography } from 'antd'
import { withRouter, RouteComponentProps, Link } from 'react-router-dom'
interface PropsType extends RouteComponentProps {
  id: number;
  size: 'large' | 'small';
  title: string;
  imageSrc: string;
  price: string | number
}
// 使用高阶函数HOC实现数据传递路由跳转
const ProduceImageComponent: React.FC<PropsType> = ({ id, size, title, imageSrc, price, history }) => {
  return (
    // <div onClick={() => { history.push(`/detail/${id}`) }}>
    //   { size === 'large' ? (<Image src={imageSrc} width={490} height={285} />) :
    //     (<Image src={imageSrc} width={240} height={120} />)
    //   }
    //   <div>
    //     <Typography.Title level={3} type="secondary">{title.slice(0, 25)}</Typography.Title>
    //     <Typography.Title level={3} type="danger">￥{price}起</Typography.Title>
    //   </div>
    // </div>
    <Link to={`/detail/${id}`}>
      { size === 'large' ? (<Image src={imageSrc} width={490} height={285} />) :
        (<Image src={imageSrc} width={240} height={120} />)
      }
      <div>
        <Typography.Title level={3} type="secondary">{title.slice(0, 25)}</Typography.Title>
        <Typography.Title level={3} type="danger">￥{price}起</Typography.Title>
      </div>
    </Link>
  )
}
export const ProduceImage = withRouter(ProduceImageComponent)